<!-- 引入编辑器样式 -->
<link rel="stylesheet" type="text/css" href="{{ static_url }}/css/edit.css" />

<!-- 引入编辑器核心文件 -->
<script src="{{ static_url }}/js/tinymce.min.js"></script>

<!-- 引入语言包 -->
<script src="{{ static_url }}/js/langs/zh_CN.js"></script>

<!-- 引入配置文件 -->
<script src="{{ static_url }}/js/config.js"></script>

<script>

    // 在 tinymce.init 之前添加主题检测
    const isDarkMode = document.documentElement.classList.contains('dark');
window.addEventListener('load', function() {
    // 从meta标签获取csrf token
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    
    // 获取基础配置
    const editorConfig = {
        // 基础配置
        selector: '{{ config.selector }}',
        language: '{{ config.language }}',
        base_url: '{{ static_url }}/js',
        height: {{ config.height }},
        
        // 插件配置
        plugins: {{ config.plugins|tojson }},

        // 自动保存设置
        autosave_ask_before_unload: true,
        autosave_interval: '30s',
        autosave_prefix: '{{ autosave_prefix }}',
        autosave_restore_when_empty: false,
        autosave_retention: '2m',
        
        // 图片上传设置
        images_upload_handler: function (blobInfo, progress) {
            return new Promise((resolve, reject) => {
                const formData = new FormData();
                formData.append('upload', blobInfo.blob(), blobInfo.filename());
                formData.append('csrf_token', csrfToken);

                fetch('{{ url_for("blog.upload_image") }}', {
                    method: 'POST',
                    body: formData,
                    credentials: 'same-origin'
                })
                .then(response => response.json())
                .then(result => {
                    if (result.location) {
                        resolve(result.location);
                    } else {
                        reject('上传失败：' + (result.error || '未知错误'));
                    }
                })
                .catch(error => {
                    reject('上传失败：' + error);
                });
            });
        },
        image_dimensions: {{ config.image_dimensions|tojson }},
        image_class_list: {{ config.image_class_list|tojson }},
        // 根据当前主题设置皮肤
    // 根据当前主题设置皮肤
    skin: isDarkMode ? 'oxide-dark' : 'oxide',
        content_css: isDarkMode ? 'dark' : 'default',
        // 设置编辑器内容的样式
        content_style: `
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            padding: 1rem;
            background-color: ${isDarkMode ? '#1f2937' : '#ffffff'};
            color: ${isDarkMode ? '#e5e7eb' : '#000000'};
        }
        img {
            max-width: 100%;
            height: auto;
            border-radius: 0.375rem;
        }
        pre {
            background: ${isDarkMode ? '#374151' : '#f4f4f4'};
            padding: 1rem;
            border-radius: 0.375rem;
            color: ${isDarkMode ? '#e5e7eb' : '#1f2937'};
        }
        blockquote {
            border-left: 4px solid ${isDarkMode ? '#4b5563' : '#e5e7eb'};
            padding-left: 1rem;
            margin-left: 0;
            color: ${isDarkMode ? '#9ca3af' : '#6b7280'};
        }
        .dark-theme {
            background-color: #1f2937;
            color: #e5e7eb;
        }
    `,
        // 监听主题变化
        setup: function(editor) {
        // 等待编辑器初始化完成后再设置初始主题
        editor.on('init', function() {
            // 设置初始主题
            const isDark = document.documentElement.classList.contains('dark');
            if (isDark) {
                editor.dom.addClass(editor.getBody(), 'dark-theme');
                editor.getBody().setAttribute('data-mce-style',
                    'overflow-y: hidden; padding-left: 1px; padding-right: 1px; min-height: inherit; background: #1f2937;'
                );
            }
        });

        // 监听主题变化
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.attributeName === 'class') {
                    const isDark = document.documentElement.classList.contains('dark');
                    const content = editor.getContent();
                    editor.setContent(''); // 临时清空内容
                    if (isDark) {
                        editor.dom.addClass(editor.getBody(), 'dark-theme');
                        editor.getBody().setAttribute('data-mce-style',
                            'overflow-y: hidden; padding-left: 1px; padding-right: 1px; min-height: inherit; background: #1f2937;'
                        );
                    } else {
                        editor.dom.removeClass(editor.getBody(), 'dark-theme');
                        editor.getBody().setAttribute('data-mce-style',
                            'overflow-y: hidden; padding-left: 1px; padding-right: 1px; min-height: inherit;'
                        );
                    }
                    editor.setContent(content); // 恢复内容
                }
            });
        });

        observer.observe(document.documentElement, {
            attributes: true,
            attributeFilter: ['class']
        });
    }

    };

    // 初始化编辑器
    tinymce.init(editorConfig);
});
</script> 